<style>
    h3 {
        margin-bottom: -5px;
    }

    .table-show{
        padding-top: 30px;
    }
</style>
<script type="text/javascript" src="<?=$this->baseUrl()?>/js/jquery.cookie.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        newData('table');
        paidData('table');
    });

    function newData(href){
        $.post(href, {statusId : 1}, function(data){
            document.getElementById('new').innerHTML = data;
            $("a#link").click(function(){
                $.cookie('prevpage', 'pending');
            });
            $('#new a.nav').click(function(event){
                event.preventDefault();
                var href = $(this).attr('href');
                newData(href);
            });
            $('#new select.nav').removeAttr('onchange');
            $('#new select.nav').change(function(){
                var href = '<?=$this->baseUrl()?>/transaction/table/page/' + $(this).val();
                newData(href);
            });
        });
    }

    function paidData(href){
        $.post(href, {statusId : 2}, function(data){
            document.getElementById('paid').innerHTML = data;
            $("a#link").click(function(){
                $.cookie('prevpage', 'pending');
            });
            $('#paid a.nav').click(function(event){
                event.preventDefault();
                var href = $(this).attr('href');
                paidData(href);
            });
            $('#paid select.nav').removeAttr('onchange');
            $('#paid select.nav').change(function(){
                var href = '<?=$this->baseUrl()?>/transaction/table/page/' + $(this).val();
                paidData(href);
            });
        });
    }

    function cancel(transactionId,code,statusId){
        var answer = prompt("Masukkan alasan Anda","");
        if(answer!=null){
            if(answer.length==0){
                alert('Mohon masukkan alasan Anda');
                return;
            }

            document.frmCancel.transactionId.value = transactionId;
            document.frmCancel.transactionCode.value = code;
            document.frmCancel.statusId.value = statusId;
            document.frmCancel.reason.value = answer;
            document.frmCancel.submit();
        }
    }

    function accept(transactionId,code){
        document.frmAccept.transactionId.value = transactionId;
        document.frmAccept.transactionCode.value = code;
        document.frmAccept.submit();
    }
</script>
<div id="view-content">
    <div class="table-show">
    <h3>Transaksi yang belum dibayar</h3>
    <div id="new">
        <!-- Table content is loaded using JQuery ajax -->
        <div style ="padding:10px;">Loading...</div>
    </div>
    </div>
    <div class="table-show">
    <h3>Transaksi yang sudah dibayar</h3>
    <div id="paid">
        <!-- Table content is loaded using JQuery ajax -->
        <div style ="padding:10px;">Loading...</div>
    </div>
    </div>
    <div id="hiddenform" style="display:none;">
        <form name="frmAccept" method="POST">
            <?php echo $this->formHidden("transactionId","0"); ?>
            <?php echo $this->formHidden("transactionCode",""); ?>
            <?php echo $this->formHidden("accept","Setujui"); ?>
        </form>
        <form name="frmCancel" method="POST">
            <?php echo $this->formHidden("transactionId","0"); ?>
            <?php echo $this->formHidden("transactionCode",""); ?>
            <?php echo $this->formHidden("statusId","0"); ?>
            <?php echo $this->formHidden("cancel","Batalkan"); ?>
            <?php echo $this->formHidden("reason",""); ?>
        </form>
    </div>
</div>